import React from 'react';
import cn from 'classnames';
import { Icon, Form, Row, Col, Tag } from 'antd';
import PropTypes from 'prop-types';
import styles from './PersonInfo.less';

const PersonInfo = ({ sex, name, status, infos, btns, children, color, num, ...rest }) => (
    <div {...rest}>
        <Row type="flex" className={styles.person}>
            <Col style={{ flex: 1 }}>
                <span className={styles.name}>{name}</span>
                {num}
                {sex && <Icon className={cn(styles.sex, styles[`sex-${sex}`])} type={sex} />}
                {status && status.indexOf('undefined') === -1 ? (
                    <Tag color={color} className={styles.status}>
                        {status}
                    </Tag>
                ) : (
                    ''
                )}
            </Col>

            <Col className={styles.btns}>
                <Row type="flex" gutter="16">
                    {btns}
                </Row>
            </Col>
        </Row>
        <Row type="flex">
            <Col className={styles.info}>
                <Form layout="inline">
                    {infos.map(info => (
                        <Form.Item key={info.label} label={info.label}>
                            {info.value}
                        </Form.Item>
                    ))}
                </Form>
            </Col>
        </Row>
        {children}
    </div>
);

PersonInfo.propTypes = {
    // 性别
    sex: PropTypes.oneOfType(['man', 'woman']),
    // 职位名称
    name: PropTypes.string.isRequired,
    // TODO 状态名称，现在不知道有什么状态，后续可能改成状态码
    status: PropTypes.string.isRequired,
    // 招聘发起人信息
    infos: PropTypes.arrayOf(
        PropTypes.shape({
            label: PropTypes.string,
            value: PropTypes.string
        })
    ),
    /**
     * 标签颜色
     */
    color: PropTypes.string.isRequired,
    // 右侧操作按钮组
    btns: PropTypes.arrayOf(PropTypes.element)
};

PersonInfo.defaultProps = {
    sex: '',
    infos: [],
    btns: []
};

export default PersonInfo;
